<!--  -->
<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>捐赠管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户捐赠</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="10">
                <el-col :span="7">
                    <el-input v-model="queryInfo.query" placeholder="请输入查询内容" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search" @click="getCampusList"></el-button>
                    </el-input>
                </el-col>
            </el-row>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="物品id">
                      <span>{{ props.row.donationId }}</span>
                    </el-form-item>
                    <el-form-item label="发布人id">
                      <span>{{ props.row.userId }}</span>
                    </el-form-item>
                    <el-form-item label="物品状态">
                      <span>{{ props.row.donationState }}</span>
                    </el-form-item>
                    <el-form-item label="发布人姓名">
                      <span>{{ props.row.userName }}</span>
                    </el-form-item>
                    <el-form-item label="闲置描述">
                      <span>{{ props.row.donationDescription }}</span>
                    </el-form-item>
                    <el-form-item label="发布人手机号">
                      <span>{{ props.row.phone }}</span>
                    </el-form-item>
                    <el-form-item label="类型">
                      <span>{{ props.row.donationCategory }}</span>
                    </el-form-item>
                    <el-form-item label="地点">
                      <span>{{ props.row.donationAddress }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column
                label="物品id"
                prop="donationId">
              </el-table-column>
              <el-table-column
                label="发布人id"
                prop="userId">
              </el-table-column>
              <el-table-column
                label="发帖人姓名"
                prop="userName"
                align="center"
                width="120%">
              </el-table-column>
              <el-table-column
                label="物品状态"
                prop="donationState"
                :filters="[{ text: '未接收', value: '未接收' },{ text: '已接收', value: '已接收' }, { text: '运输中', value: '运输中' }]"
                :filter-method="filterStatus"
                filter-placement="bottom-end"
                width="120%">
              </el-table-column>
              <el-table-column
                label="图片详情" width="80px">
                <template slot-scope="scope">
                  <el-button type="warning" icon="el-icon-picture" @click="showPostImage(scope.row)" circle></el-button>
                </template>
              </el-table-column>
              <el-table-column
                    fixed="right"
                    label="操作"
                    width="300" align="center">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="确认接收" placement="top">
                          <el-button v-if="scope.row.acceptStaet == 0" @click="changeDonationState(scope.row, 1)" type="success" icon="el-icon-mobile" circle></el-button>
                          <el-button v-if="scope.row.acceptStaet == 1" disabled type="info" icon="el-icon-mobile" circle></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="确认发货" placement="top">
                          <el-button v-if="scope.row.transationState == 0" @click="changeDonationState(scope.row, 2)" type="success" icon="el-icon-loading" circle></el-button>
                          <el-button v-if="scope.row.transationState == 1" disabled type="info" icon="el-icon-magic-stick" circle></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="确认送达" placement="top">
                          <el-button v-if="scope.row.arrivalState == 0" @click="changeDonationState(scope.row, 3)" type="success" icon="el-icon-document-checked" circle></el-button>
                          <el-button v-if="scope.row.arrivalState == 1" type="info" icon="el-icon-document-checked" circle></el-button>
                        </el-tooltip>
                        <el-button @click="getTimeStamp(scope.row)" type="warning" icon="el-icon-time" circle></el-button>
                        <el-button @click="deleteClick(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
                    </template>
              </el-table-column>
              <el-table-column
                label="发布时间"
                prop="postTime" sortable column-key="date">
              </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNum"
                :page-sizes="[6, 10, 20, 30]"
                :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>

        <el-dialog title="捐赠物品时间线" width="600px" :visible.sync="timeStampDialogVisible">
          <template>
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in timeStamp"
                :key="index"
                placement="top"
              >
                <el-card>
                  <h4>{{ item.content }}</h4>
                  <p>时间：{{ item.timeStamp }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </template>
        </el-dialog>

        <el-dialog title="帖子图片详情" :visible.sync="imageDialogVisible">
          <template v-for="(url, index) in posturls">
           <el-popconfirm :key="url" title="确定要删除下面图片吗？" @onConfirm="deletePostImage(index)">
              <el-button type="danger" icon="el-icon-delete" circle style="margin-top:10px;margin-bottom:15px" slot="reference"></el-button>
            </el-popconfirm>
            <el-image style="width:100%" :key="url" :src="url" :preview-src-list="posturls" lazy></el-image>
          </template>
        </el-dialog>

        <!-- 修改帖子信息 -->
        <el-dialog
            title="修改帖子信息"
            :visible.sync="editDialogVisible"
            width="40%">
            <el-form :model="editForm" status-icon  ref="editFormRef" label-width="100px" class="demo-ruleForm">
                <el-form-item label="闲置id" prop="postid">
                    <el-input type="text" v-model="editForm.goodId" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="发帖人姓名" prop="userName">
                    <el-input type="text" v-model="editForm.userName" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="闲置名字" prop="goodName">
                    <el-input type="text" v-model="editForm.goodName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="goodPrice">
                    <el-input type="text" v-model="editForm.goodPrice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地点" prop="goodAddress">
                    <el-input type="text" v-model="editForm.goodAddress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="goodCategory">
                  <el-select v-model="editForm.goodCategory" @change="setGoodCategoryId">
                    <el-option
                    v-for="(category, index) in goodCategory"
                    :key="index"
                    :label="category.goodCategory"
                    :value="category.goodCategoryId"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="闲置状态">
                    <el-radio-group v-model="editForm.goodState" size="medium">
                    <el-radio border label="已出售"></el-radio>
                    <el-radio border label="未出售"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="闲置描述" prop="goodDescription">
                    <el-input type="textarea" v-model="editForm.goodDescription" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateCampusInfo">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>

// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 6
      },
      total: 0,
      goodCategory: [],
      reverse: true,
      imageDialogVisible: false,
      commentDialogVisible: false,
      commentImageVisible: false,
      editDialogVisible: false,
      posturls: [],
      commenturls: [],
      tableData: [],
      deleteImagegoodId: '',
      timeStampDialogVisible: false,
      editForm: [],
      timeStamp: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    setGoodCategoryId () {
      this.editForm.goodCategoryId = this.editForm.goodCategory
    },
    async getDonationList () {
      const { data: res } = await this.$axios.get('admin/getdonationnoarrival', { params: this.queryInfo })
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.tableData = res.data
      this.total = res.count
    },
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getDonationList()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pageNum = newPage
      this.getDonationList()
    },
    showPostImage (scopeRow) {
      this.imageDialogVisible = true
      this.posturls = scopeRow.imageUrlList
      this.deleteImagegoodId = scopeRow.goodId
    },
    async deletePostImage (index) {
      if (this.posturls.length === 1) {
        this.$notify({
          title: '警告',
          message: '闲置商品至少保留一张图片',
          duration: 2000
        })
      } else {
        const { data: res } = await this.$axios.delete('admin/deletecampusimage' + '/' + this.deleteImagegoodId + '/' + index)
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        }
        this.$message.success(res.msg)
        this.getDonationList()
        this.imageDialogVisible = false
      }
    },
    filterStatus (value, row, column) {
      const property = column.property
      return row[property] === value
    },
    async editClick (scopeRow) {
      this.editDialogVisible = true
      this.editForm = scopeRow
      const { data: res } = await this.$axios.get('getGoodsCategory')
      this.goodCategory = res.data
      if (this.editForm.goodState === 1) {
        this.editForm.goodState = '未出售'
      } else {
        this.editForm.goodState = '已出售'
      }
    },
    async updateCampusInfo () {
      if (this.editForm.goodState === '已出售') {
        this.editForm.goodState = 2
      } else {
        this.editForm.goodState = 1
      }
      const { data: res } = await this.$axios.post('admin/updatecampusinfo', this.editForm)
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.$message.success(res.msg)
      this.editDialogVisible = false
    },
    changeDonationState (scopeRow, num) {
      this.$confirm('此操作将该表物品的状态，此状态修改后不可再次修改, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$axios.post('admin/changedonationstate/' + scopeRow.donationId + '/' + num, {
          headers: {
            contentType: 'application/json;charset=UTF-8'
          }
        })
        if (res.code !== 200) {
          this.getDonationList()
          return this.$message.error(res.msg)
        } else {
          this.getDonationList()
          return this.$message.success(res.msg)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    },
    async getTimeStamp (scopeRow) {
      this.timeStampDialogVisible = true
      const { data: res } = await this.$axios.get('admin/getdonationtimestamp' + '/' + scopeRow.donationId)
      this.timeStamp = res.data
    },
    deleteClick (scopeRow) {
      this.$confirm('此操作将永久删除该捐赠, 并删除该闲置对应的图片和处理记录等, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$axios.delete('admin/deletedonation/' + scopeRow.donationId, {
          headers: {
            contentType: 'application/json;charset=UTF-8'
          }
        })
        if (res.code !== 200) {
          this.getDonationList()
          return this.$message.error(res.msg)
        } else {
          this.getDonationList()
          return this.$message.success(res.msg)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
        this.getDonationList()
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.getDonationList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
